 <template>
   <!--左侧菜单 begin-->
 <div style="padding:10px 20px;" class="overflowY">
   <el-row>
     <el-col :span="6">
       <div style="padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;">
         <leftMenu :msgData="leftMenuData" :isBorder="isBorderShow"></leftMenu>
       </div>
     </el-col>
     <el-col :span="18">
       <div style="width: 100%;height: 392px;border:1px solid #ccc;border-left:0;">
         <span style="display: inline-block;padding: 20px;font-size: 14px;color: #333333">右侧变化内容</span>
       </div>
     </el-col>
   </el-row>
   <base-card title="说明">
     <code style="margin-top: 15px;">
       <span style="width: 100%;display: inline-block;">1、LeftMenu上需传2个值，msgData – 菜单内容（array） isBorder – 边框控制（string）</span>
       <span style="width: 100%;display: inline-block;">2、Data – return 里面的isBorderShow 控制菜单的边框</span>
       <div style="margin-left: 18px;">
         <span style="width: 100%;display: inline-block;">参数为 ‘’ - 表示菜单不带边框</span>
         <span style="width: 100%;display: inline-block;">参数为 ‘all’ - 表示菜单带边框</span>
         <span style="width: 100%;display: inline-block;">参数为 ‘left’ – 表示菜单带左侧边框</span>
         <span style="width: 100%;display: inline-block;">参数为 ‘right’ - 表示菜单带右侧边框</span>
         <span style="width: 100%;display: inline-block;">参数为 ‘top’- 表示菜单带上面边框</span>
         <span style="width: 100%;display: inline-block;">参数为 ‘bottom’ - 表示菜单带下面边框</span>
         <span style="width: 100%;display: inline-block;">3、最外层 div 上的margin、padding控制div的外边距和内边距，四个值分别为上、右、下、左</span>
       </div>
     </code>
   </base-card>
   <base-card title="HTML">
     <pre><code>   &lt;div style="padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;"&gt;<br>      &lt;leftMenu :msgData="leftMenuData" :isBorder="isBorderShow"&gt;&lt;/leftMenu&gt;<br>   &lt;/div&gt;</code></pre>
   </base-card>
   <base-card title="JS">
     <pre><code>import leftMenu from '@/components/demoAssembly/leftMenu' // 左侧菜单<br>export default {<br>  data() {<br>    return {<br>      isBorderShow: 'right',<br>      leftMenuData: ['全部', '房建', '市政', '园林', '机电', '电力', '公路', '铁路', '水利', '通讯', '化工', '港口', '装饰']<br>    }<br>  },<br>  components: {<br>    leftMenu<br>  }<br>}</code></pre>
   </base-card>
 </div>
   <!--左侧菜单 end-->
</template>

<script>
import leftMenu from '@/components/demoAssembly/leftMenu' // 左侧菜单
import BaseCard from '@/components/BaseCard/BaseCard'
export default {
  data() {
    return {
      isBorderShow: 'all',
      leftMenuData: ['全部', '市政', '市政', '园林', '机电', '电力', '公路', '铁路', '水利', '通讯', '化工', '港口', '装饰']
    }
  },
  components: {
    leftMenu,
    BaseCard
  }
}
</script>

